<template>
	<div class="m-box">
		<div class="logo">
			<div>1</div>
			<div>1</div>
			<div>1</div>
			<div>1</div>
		</div>
		<div class="pending"></div>
		<div class="pending view">
			<div></div>
			<div></div>
		</div>
		
		<div class="vechar">
			<el-date-picker
				 size="small"
			     v-model="mytime"
			     type="daterange"
			     range-separator="至"
			     start-placeholder="开始日期"
				 @change="check"
			     end-placeholder="结束日期">
			   </el-date-picker>
			<!-- 
			 :legend-visible="false"		隐藏图例
			 -->
			<ve-line :data="chartData" :settings="chartSettings" :legend-visible="false"></ve-line>
		</div>
	</div>
	
</template>

<script>
	export default {
		methods:{
			check(){
				this.chartData.rows=this.rows2.filter(item=>{
					return new Date(item.日期) >= this.mytime[0] && new Date(item.日期) <= this.mytime[1];
				})
			}
		},
	    data () {
	         this.chartSettings = {
	             xAxisType: 'time',
				 area:true,
				 axisSite: { right: ['订单金额'] }
	         }
	         return {
				mytime:'',
				// 是图表数据
				chartData: {
	             columns: ['日期', '订单数量', '订单金额'],
	             rows: [
	             
	             ]
	           },
				rows2:[
					{ '日期': '2020-11-01', '订单数量': 20, '订单金额': 2000 },
					{ '日期': '2020-11-02', '订单数量': 33, '订单金额': 5000 },
					{ '日期': '2020-11-03', '订单数量': 50, '订单金额':  10000},
					{ '日期': '2020-11-04', '订单数量': 78, '订单金额':  8000},
					{ '日期': '2020-11-05', '订单数量': 40, '订单金额':  4000},
					{ '日期': '2020-11-06', '订单数量': 25, '订单金额':  2000},
					{ '日期': '2020-11-07', '订单数量': 50, '订单金额':  10000}
				]
	         }
	       },
		   mounted() {
		   	this.chartData.rows = this.rows2;
		   }
	  }
</script>

<style lang="scss"  scoped="scoped">
	.m-box{
		width:80%;
		height:1000px;
		border:2px solid red;
		margin:auto;
		.logo{
			width:100%;
			display: flex;
			margin-top:100px;
			justify-content: space-between;
			div{
				width:20%;
				border:1px solid #DCDFE6;
				height:100px;
			}
		}
		.pending{
			width:100%;
			height:200px;
			border:1px solid #DCDFE6;
			margin:20px 0px;
		}
		.view{
			display:flex;
			justify-content: space-between;
			border:0;
			div{
				width:45%;
				border:1px solid #DCDFE6;
				height:200px;
			}
		}
		.vechar{
			width:80%;
			border-left:1px solid #DCDFE6;
			border-top:1px solid #DCDFE6;
			margin-top:30px;
			float:right;
			.el-date-editor{
				z-index: 9999;
				float:right;
			}
		}
	}
	
</style>
